<template>
  <div class="person">
    <h2>姓名: {{ person.name }}</h2>
    <h2>年龄: {{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>

</template>

<script setup lang="ts" name="Person">
//将一个响应式对象(下面的reactive({xxxx: xxx})中的每一个属性，转换为`ref`对象。
import {ref, reactive, toRefs, toRef} from "vue"
// 数据
let person = reactive({
  name: '张三',
  age: 18
})

// `toRefs`与`toRef`功能一致，但`toRefs`可以批量转换
let {name, age} = toRefs(person)
let nl = toRef(person, 'age')
console.log(nl.value);

// 方法
function changeName(){
  name += '~'
}
function changeAge(){
  age += 1
}

</script>
<style scoped>

.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>